<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="search-list-box">
        <div class="search-list__header">
            <div class="search-list__input">
                <!-- <el-input
                    placeholder="请输入关键词搜索"
                    prefix-icon="el-icon-search"
                    v-model="search"
                    @input="handleInputChange"
                >
                </el-input> -->
            </div>
            <div class="search-list__btn">
                <el-button type="primary" @click="handleItemClick(null,{ type:'add' })">添加</el-button>
            </div>
        </div>
        <div class="search-list__body">
            <ul class="search-list__ul">
                <ask-empty-text v-if="list.length === 0"></ask-empty-text>
                <template v-for="(item,$i) in list">
                    <data-item
                        :item="item"
                        :active="active"
                        ref="dataItemRef"
                        :key="item._key"
                        @item-close="(option)=> handleItemClose(option, $i)"
                        @item-click="(vm,option)=> handleItemClick(vm,option, $i)">
                    </data-item>
                </template>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import DataItem from "./item.vue";

@Component({
    model: {
        prop: "value",
        event: "change"
    },
    components: {
        DataItem
    }
})
export default class SearchList extends Vue {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly list!: any[];

    @Prop({
        type: [String, Number],
        default: ""
    })
    readonly value!: string|number;

    get active() {
        return this.value;
    }

    set active(val: any) {
        this.$emit("change", val);
    }

    search = "";
    itemInstance: any = null;
    handleItemClick(vm: any, option: any, index: number|undefined) {
        this.handleEdit(vm, option.type);
        this.handleClick(option.type, option);
        this.handleCancel(option.type);
        option.index = index;
        this.$emit('item-' + option.type, option);
    }

    handleEdit(vm: any, type: any) {
        if (type !== 'edit') return;
        this.closeItemInput();
        this.itemInstance = vm;
    }

    handleClick(type: any, option: any) {
        if (type !== 'click') return;
        this.active = option.item.id || "";
    }

    handleCancel(type: any) {
        if (type !== 'cancel') return;
        this.itemInstance = null;
    }

    closeItemInput() {
        this.itemInstance && this.itemInstance.close();
    }

    close() {
        this.itemInstance && this.itemInstance.close();
        this.itemInstance = null;
    }

    getChildRef() {
        // const dataItemRefs: any[] = this.$refs.dataItemRef;
        return this.$refs.dataItemRef;
    }

    handleItemClose(option: any, index: number|undefined) {
        option.index = index;
        this.$emit("item-close", option);
    }

    handleInputChange() {
        this.closeItemInput();
        this.$emit("item-serach", this.search);
    }
}
</script>
